<template>
	<div class="playerinformation">
		<!-- 查询表单 -->
		<el-form label-width="100px" class="search">
		  <el-form-item label="收费服务名称">
		    <el-input v-model="name" placeholder="请输入收费服务名称"></el-input>
		  </el-form-item>
		</el-form>
		<!-- 查询按钮 -->
		<el-button type="primary" @click="search()">查询</el-button>
		<!-- 添加表单 -->
		<el-button type="success" @click="isAdd()">添加</el-button>
		<el-dialog title="添加服务" :visible.sync="dialogFormVisible" >
			<el-form :model="form">
				<el-form-item label="服务名称" :label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="服务说明" :label-width="formLabelWidth">
					<el-input type="textarea" v-model="form.desc"></el-input>
				</el-form-item>
				<el-form-item label="服务金额" :label-width="formLabelWidth">
					<el-input v-model="form.cost" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 表格分页 -->
		<el-table :data="tableData" border fit style="width: 100%">
		    <el-table-column fixed prop="name" label="服务名称"></el-table-column>
		    <el-table-column prop="desc" label="服务说明"></el-table-column>
		    <el-table-column prop="cost" label="服务金额"></el-table-column>
		    <el-table-column fixed="right" label="操作">
		      <template slot-scope="scope">
		        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
		        <el-button type="text" size="small" @click="isDelete()">删除</el-button>
		      </template>
		    </el-table-column>
		</el-table>
		<el-pagination
			background
			layout="prev, pager, next"
			:total="1000">
		</el-pagination>
	</div>
</template>

<script>
	export default{
		name:"PlayerINformation",
		data(){
			return{
				name:"",
				type:"",
				nickname:"",
				uid:"",
				tableData: [{
						name: '伙食费',
						desc: '老人每月的伙食费用',
						cost: '1000元'
					}, {
						name: '单人间床位费',
						desc: '老人单人间床位费用',
						cost: '800元'
					}, {
						name: '双人间床位费',
						desc: '老人双人间床位费用',
						cost: '500元'
					}, {
						name: '三级护理',
						desc: '住宿卫生服务、定期洗换床被、送开水、督促吃药等',
						cost: '400元'
					}],
				dialogFormVisible: false,
				form: {
					name: '',
					desc: '',
					cost: '',
					delivery: false
				},
				formLabelWidth: '120px'
			}
		},
		methods:{
			//查看
			handleClick(row) {
				console.log(row);
				this.form.name=row.name;
				this.form.desc=row.desc;
				this.form.cost=row.cost;
				this.dialogFormVisible=true;
				//console.log(row.name);
			},
			search(){
				console.log(this.name,this.nickname,this.uid)
			},
			isAdd(){
				this.form.name='';
				this.form.desc='';
				this.form.cost='';
				this.dialogFormVisible=true;
			},
			isDelete() {
				this.$confirm('此操作将删除该服务, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});
			}
		}
	}
</script>

<style scoped="scoped">
	.search{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
	.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-pagination{
	  margin: 20px;
	  text-align: right;
  }

  .el-dialog .el-form{
	  width: 500px;
  }
</style>
